<template>
    <div>
        <zxjtHeader></zxjtHeader>
        <div class="main">
            <div class="institution-msg">
                <div class="institution-img">
                    <img :src="insCover + '?x-oss-process=image/resize,m_fixed,h_88,w_88'">
                </div>
                <div class="institution-info">
                    {{ insName }}
                </div>
                <div class="focus" v-if="followFlag" @click="followIns">
                    <van-icon name="plus" size="1rem" color="#FF5A00" />
                    关注
                </div>
                <div class="no-focus" v-else @click="showPopup">
                    <van-icon name="success" size="1rem" color="#AAAAAA" />
                    已关注
                </div>
            </div>
            <div class="institution-video">
                <div class="video-word">
                    TA的视频
                </div>
                <div class="institution-video-info" v-if="insVideo.length">
                    <div class="institution-video-detials">
                        <van-list v-model="loading" :finished="finished" finished-text="到底啦" @load="getVideo">
                            <div class="video-detials">
                                <div class="video-detial" v-for="(item, index) in insVideo" :key="index" @click="goVideo(item.h5Url,item.mainId,item.videoLiveId,item.contentTitle)"
                                :data-videoLiveId="item.videoLiveId" :data-contentTitle="item.contentTitle" :data-mainId="item.mainId">
                                    <img :src="item.coverUrl + '?x-oss-process=image/resize,m_fixed,h_210,w_335'">
                                    <!-- <div class="state"></div> -->
                                    <div class="video-info">
                                        <div class="title">{{ item.contentTitle }}</div>
                                    </div>
                                </div>
                            </div>
                        </van-list>
                    </div>
                </div>
                <div class="empty" v-else>
                    <img src="../assets/images/zxjt/empty-noCollect.png" alt="">
                </div>
            </div>
            <van-popup class="popup-box" v-model="show" position="bottom" round>
                <div class="confirm-tip">确定不再关注TA嘛？</div>
                <div class="yesOrNo">
                    <div class="thinkAgain" @click="show = false">我再想想</div>
                    <div class="confirm" @click="confirmCancel">确定</div>
                </div>
            </van-popup>
        </div>
    </div>
</template>

<script>
import zxjtHeader from './compoments/zxjtHeader.vue'
import { getFollowState, followSpecialColumn, cancelFollowSpecialColumn , getInstitutionContent , getInstitutionInfo , getInstitutionContentLiveState , getInstitutionLiveStateInfo } from '../util/api'
export default {
    components: {
        zxjtHeader
    },
    data() {
        return {
            followFlag: null,//false为已关注  true为未关注
            show: false,
            finished: false,
            loading: false,
            insName: '',//机构名
            insCover:'',//机构logo
            page: 1,
            insVideo: [],
            tagId: '8', //视频专区指定标签Id
        }
    },
    computed: {
        //当前机构ID
        insId() {
            return this.$route.query.institutionId
        },
        //当前机构来源（直播小站  2 或者非直播小站  不是2）如果是2，查询接口要传6
        insSource() {
            if (this.$route.query.institutionSource == 2) {
                return 6
            } else {
                return 1
            }
        }
    },
    methods: {
        showPopup() {
            this.show = true;
        },
        //点击确定取消
        confirmCancel() {
            this.cancelFollowIns()
            this.followFlag = true//测试
            this.show = false//测试
        },
         //查询是否已经关注该机构
        async getFollowStatus() {
            try {
                const dataMsg = await getFollowState(this.insId, this.insSource)
                const { code, data } = dataMsg.data
                console.log(code, data,"查询是否已经关注该机构");
                if (code == '000000') {
                    this.followFlag = !data
                    //this.followFlag = true //初始化关注状态
                }
            } catch (error) {
                console.log("查询失败", error);
            }
        },
        //点击关注
        async followIns() {
            try {
                const dataMsg = await followSpecialColumn(this.insId, this.insSource)
                const { code, data } = dataMsg.data
                console.log(code, data, "关注");
                if (code == '000000') {
                    console.log("关注成功");
                    this.sensorsTrack()//点击关注打点
                    this.followFlag = false//变已关注
                }
            } catch (error) {
                console.log("关注失败", error);
            }
        },
        //点击取消关注
        async cancelFollowIns() {
            try {
                const dataMsg = await cancelFollowSpecialColumn(this.insId, this.insSource)
                const { code, data } = dataMsg
                console.log(code, data,"取消关注");
                if (code == '000000') {
                    console.log("取消关注成功");
                    this.followFlag = true//变为未关注
                }
                //无论是否取消关注成功都关闭弹出框
                this.show = false
            } catch (error) {
                console.log("取消关注失败", error);
            }
        },
        //查询机构视频信息(分页)(非直播小站)
        async getInstitutionVideoInfo() {
            let params = {
                "contentType": 4,
                "institutionCode": this.insId,
                "pageNumber": 10,
                "pageSize": this.page
            }
            this.loading = true
            try {
                const dataMsg = await getInstitutionContent(params)
                const { code, data } = dataMsg.data
                if (code == '000000') {
                    const { list } = data
                    list.forEach(item => {
                        this.insVideo.push({
                            h5Url: item.h5Url,
                            contentTitle: item.contentTitle,
                            coverUrl: item.coverUrl,
                            videoLiveId: e.videoLiveId,//用于埋点
                            mainId: e.mainId//用于埋点
                        })
                    })
                    this.page++
                    this.loading = false
                    if (list.length < 10) {
                        this.finished = true
                    }
                }
            } catch (error) {
                console.log(error);
                //显示加载完成
                this.finished = true
                this.loading = false
            }
        },
        //查询机构视频信息(分页)
        async getInstitutionVideoLiveStateInfo() {
            this.loading = true
            try {
                const dataMsg = await getInstitutionContentLiveState(this.tagId, "1,2,3", this.insId, this.page, 10)
                const { code, data } = dataMsg.data
                if (code == '000000') {
                    data.forEach(item => {
                        this.insVideo.push({
                            h5Url: item.videoUrl,
                            contentTitle: item.title,
                            coverUrl: item.imgUrl,
                            videoLiveId: e.mixId,//用于埋点
                            mainId: e.mainId//用于埋点
                        })
                    })
                    this.page++
                    this.loading = false
                    if (list.length < 10) {
                        this.finished = true
                    }
                }
            } catch (error) {
                
            }
            
        },
        getVideo() {
            if (this.$route.query.institutionSource == 2) {
                this.getInstitutionVideoLiveStateInfo()
            } else {
                this.getInstitutionVideoInfo()
            }
        },
        //查询机构名和机构logo
        async getInstitutionMsg() {
            try {
                const dataMsg = await getInstitutionInfo({ institutionId: this.insId })
                const { code, data } = dataMsg.data
                if (code == '000000') {
                    this.insName = data.institutionName
                    this.insCover = data.institutionLogoUrl
                }
            } catch (error) {
                console.log(error);
            }
        },
        //查询机构名和机构logo(直播小站)
        async getInstitutionLiveStateMsg() {
            try {
                const dataMsg = await getInstitutionLiveStateInfo(this.insId)
                const { code, data } = dataMsg.data
                if (code == '000000') {
                    this.insName = data.name
                    this.insCover = data.headImage
                }
            } catch (error) {
                console.log(error);
            }
        },
        //根据不同来源查询机构信息
        getInsMsg() {
            if (this.$route.query.institutionSource == 2) {
                this.getInstitutionLiveStateMsg()
            } else {
                this.getInstitutionMsg()
            }
        },
        //点击去看视频
        goVideo(url,mainId, video_id, title) {
            const params = {
                'linkType': 1,
                'link': url
            }
            this.clickVideoDot(mainId, video_id, title)
            fun.linkUrlFloatVideo(params)

        },
        //点击关注按钮打点
        sensorsTrack() {
            $sensorsTrack('financing_videoZoneOrgDetailsPageFunctionClick', {
                organ_id:this.insId,
                organ_name: this.insName,
                function_name:'关注'
            });
        },
        //视频点击打点
        clickVideoDot(mainId, video_id, video_name) {
            $sensorsTrack('financing_videoZoneVideoClick', {
                page_name: '机构详情页',
                organ_id:this.insId,
                organ_name:this.insName,
                main_id: mainId ? mainId : '',
                video_id: video_id,
                video_name: video_name
            });
        },
        //视频点击打点（曝光）
        exposureVideoDot(mainId, video_id, video_name) {
            $sensorsTrack('financing_videoZoneVideoExposure', {
                page_name: '机构详情页',
                organ_id:this.insId,
                organ_name:this.insName,
                main_id: mainId ? mainId : '',
                video_id: video_id,
                video_name: video_name
            });
        },
        //曝光率方法
        obServerDom(selectDom) {
            //异步 this.$nextTick()
            const ob = new IntersectionObserver((entries) => {
                entries.forEach((i) => {
                    if (i.isIntersecting) {//进入视口
                        let videoLiveId = i.target.getAttribute('data-videoLiveId')
                        let title = i.target.getAttribute('data-contentTitle')
                        let mainId = i.target.getAttribute('data-mainId')
                        this.exposureVideoDot(mainId, videoLiveId, title)
                    }
                    //ob.unobserve(target)//取消观察
                });
            }, {
                //配置项
                root: null,
                threshold: 1.0,
                rootMargin: '0px',
            })
            const queryDom = document.querySelectorAll(selectDom);
            console.log(queryDom);
            queryDom.length && queryDom.forEach((item) => {
                ob.observe(item)
            })
        },
    },
    mounted() {
        this.getVideo()
        this.getFollowStatus()
        this.getInsMsg()
    }
}
</script>

<style scoped lang="less">
.main {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    .institution-msg {
        width: 100%;
        height: 148px;
        background-color: #ffffff;
        margin-bottom: 2px;
        margin-left: 24px;
        border-top: 1px solid #F2F4F8;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .institution-img {
            width: 88px;
            height: 88px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .institution-info {
            padding-left: 20px;
            width: 224px;
            height: 90px;
            font-size: 32px;
            font-weight: 400;
            color: #262E40;
            line-height: 47px;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .focus,
        .no-focus {
            width: 172px;
            height: 56px;
            border-radius: 30px;
            font-size: 28px;
            font-weight: 500;
            display: flex;
            justify-content: space-evenly;
            align-items: center;

        }


        .focus {
            border: 2px solid #FF5A00;
            color: #FF5A00;
            margin-right: 50px;
        }

        .no-focus {
            background: #E8E8E8;
            margin-right: 50px;
            color: #AAAAAA;
        }
    }

    .institution-video {
        width: 690px;
        margin: 0 auto;

        .video-word {
            border-left: 10px #EE421B solid;
            padding-left: 12px;
            font-size: 30px;
            font-weight: 600;
            color: #262E40;
            line-height: 40px;

        }

        .institution-video-info {
            .institution-video-detials {
                .video-detials {
                    width: 100%;
                    height: auto;
                    margin: 26px 0;
                    display: grid;
                    grid-template-columns: 335px 335px;
                    gap: 20px 20px;

                    .video-detial {
                        width: 335px;
                        height: 268px;
                        border-radius: 20px 20px 0 0;
                        overflow: hidden;

                        img {
                            width: 335px;
                            height: 210px;
                            border-radius: 20px;
                        }

                        .video-info {
                            margin-top: -5px;
                            width: 100%;
                            height: calc(100% - 210px);
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;

                            .title {
                                width: 100%;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                margin-top: 16px;
                                font-size: 30px;
                                font-weight: 600;
                                color: #262E40;
                            }
                        }
                    }
                }

                /deep/ .van-list__finished-text {
                    font-size: 25px;
                }

                /deep/ .van-loading__text {
                    font-size: 25px;
                }
            }
        }
        .empty{
            width: 490px;
            height: 471px;
            margin: 87px auto;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }

    .popup-box {
        width: 750px;
        height: 316px;
        background: #FFFFFF;

        .confirm-tip {
            width: 100%;
            height: 158px;
            font-size: 34px;
            font-weight: 500;
            color: #EE421B;
            line-height: 48px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .yesOrNo {
            width: 100%;
            height: 158px;
            display: flex;
            justify-content: center;
            align-items: center;

            .thinkAgain,
            .confirm {
                width: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 40px;
                font-size: 34px;
            }

            .confirm {
                color: #EE421B;
            }
        }
    }
}
</style>